<script setup lang="ts">
import { h } from "vue";
import type { Component } from "vue";

import { NFlex } from "naive-ui";
import { NMenu } from "naive-ui";
import { NIcon } from "naive-ui";
import { RouterLink } from "vue-router";

import { HomeOutline as HomeIcon } from "@vicons/ionicons5";

const renderIcon = (icon: Component) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};

const options = [
  {
    label: () =>
      h(
        RouterLink,
        {
          to: {
            path: "/home/default",
          },
        },
        { default: () => "首页" }
      ),
    key: "go-home",
    icon: renderIcon(HomeIcon),
  },
];
</script>

<template>
  <n-flex class="w-full h-full">
    <n-menu :options="options" class="w-full h-full"></n-menu>
  </n-flex>
</template>

<style scoped></style>
